<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/simple-demo.html -->
    <base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>简单路径</title>
    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    </style>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.0&key=2cac86522faa9f85cd8c9154c254625a'></script>
    <!-- UI组件库 1.0 -->

    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        zoom: 4
    });

    AMapUI.load(['lib/$','ui/misc/PathSimplifier'], function($,PathSimplifier) {

        if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
        }

        var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            //autoSetFitView:false,
            map: map, //所属的地图实例

            getPath: function(pathData, pathIndex) {

                return pathData.path;
            },
            getHoverTitle: function(pathData, pathIndex, pointIndex) {
                if (pointIndex >= 0) {
                    //point 
                    return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                }

                return pathData.name + '，点数量' + pathData.path.length;
            },
            renderOptions: {

                renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
            }
        });

        window.pathSimplifierIns = pathSimplifierIns;

        //设置数据
        pathSimplifierIns.setData([{
            name: '路线0',
            path: [
                 [113.349617,22.978563],[113.348999,22.977392],[113.352913,22.96974],[113.352882,22.964979],[113.351265,22.963858],[113.339211,23.005634],[113.339211,23.005634],[113.350548,22.958916],[113.3395,23.006618],[113.33992,23.006777],[113.33992,23.006777],[113.344818,22.936378],[113.343636,22.930147],[113.345963,22.925772],[113.346001,22.925793],[113.33992,23.006777],[113.346443,22.92584],[113.33992,23.006777],[113.346359,22.926172],[113.346451,22.926579],[113.346542,22.927511],[113.346657,22.928207],[113.346626,22.928984],[113.346085,22.929628],[113.345825,22.929676],[113.345634,22.92955],[113.345634,22.92955],[113.345634,22.92955],[113.345634,22.92955],[113.33992,23.006777],[113.33992,23.006777],[113.33992,23.006777],[113.33992,23.006777],[113.277,23.213566],[113.275314,23.213667],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.345634,22.92955],[113.345634,22.92955],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.345634,22.92955],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.274406,23.213516],[113.345634,22.92955],[113.345634,22.92955],[113.345634,22.92955],[113.345634,22.92955],[113.345634,22.92955],[113.345634,22.92955],[113.3451,22.936167],[113.34613,22.947622],[113.274406,23.213516],[113.349403,22.961472],[113.349403,22.961472],[113.274406,23.213516],[113.32856,22.975296],[113.326881,22.975874],[113.317085,22.983089],[113.313217,22.989525],[113.304527,22.99798],[113.302574,23.010588],[113.305336,23.013901],[113.308144,23.021244],[113.306198,23.033916],[113.30648,23.039272],[113.295624,23.047319],[113.294846,23.050558],[113.296593,23.05817],[113.301971,23.063953],[113.295067,23.0674],[113.274406,23.213516],[113.290649,23.071836],[113.274406,23.213516],[113.285103,23.07868],[113.283684,23.085152],[113.274406,23.213516],[113.274406,23.213516],[113.281845,23.112295],[113.284576,23.121481],[113.278656,23.129694],[113.278656,23.129694],[113.278656,23.129694],[113.278656,23.129694],[113.278656,23.129694],[113.278656,23.129694],[113.278656,23.129694],[113.277664,23.127899],[113.277771,23.128326],[113.278893,23.128693],[113.279343,23.129051],[113.280075,23.129349],[113.281136,23.129],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.281502,23.128923],[113.279854,23.129616],[113.279358,23.128839],[113.278938,23.128277],[113.27832,23.127939],[113.27832,23.127939],[113.27832,23.127939],[113.27832,23.127939],[113.27832,23.127939],[113.27832,23.127939],[113.27832,23.127939],[113.27832,23.127939],[113.27832,23.127939],[113.27832,23.127939],[113.27832,23.127939],[113.27832,23.127939],[113.27832,23.127939],[113.27832,23.127939],[113.277512,23.124546],[113.278656,23.123928],[113.280479,23.124493],[113.282822,23.124325],[113.285072,23.123972],[113.28373,23.120216],[113.282867,23.116861],[113.280441,23.1084],[113.277992,23.101379],[113.279465,23.094385],[113.283867,23.084772],[113.286537,23.076384],[113.292343,23.068434],[113.299461,23.06675],[113.298386,23.06146],[113.295235,23.053032],[113.297073,23.045855]
            ]
        }]);

        //对第一条线路（即索引 0）创建一个巡航器
        var navg1 = pathSimplifierIns.createPathNavigator(0, {
            loop: true, //循环播放
            speed: 100000 //巡航速度，单位千米/小时
        });
        navg1.start();
    });
    </script>
</body>

</html>